<template>
  <div class="echarts">
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Condition Search</span>
          </div>
        </template>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="searchInfo"
          ref="searchInfo"
        >
          <el-row>
            <el-form-item label="Registration Time:" prop="reg_time">
              <el-date-picker
                type="daterange"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                v-model="searchInfo.reg_time"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="18">
              <el-button
                type="primary"
                size="mini"
                @click="searchForm(searchInfo)"
                >SEARCH</el-button
              >
              <el-button
                type="info"
                size="mini"
                @click="resetForm('searchInfo')"
                >RESET</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <br />
    <div :style="{ height: '600%', width: '100%' }" ref="myEchart"></div>
  </div>
</template>

<script>
import "@/utils/china.js"; // 引入中国地图数据
export default {
  name: "PopulationStatistics",
  data() {
    return {
      searchInfo: {
        reg_time: [],
      },
      option: {
        title: {
          text: "Provincial Population Distribution",
          textStyle: {
            fontSize: 25,
          },
          subtext:
            "Collect the population distribution of each province in the questionnaire",
          left: "left",
        },
        // 进行相关配置
        //backgroundColor: "#64bbe742",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "lightskyblue"],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { show: true, readOnly: false }, //数据视图
            restore: { show: true }, //重置
            saveAsImage: { show: true }, //保存图片
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "北京",
                value: 599,
              },
              {
                name: "上海",
                value: 142,
              },
              {
                name: "黑龙江",
                value: 44,
              },
              {
                name: "深圳",
                value: 92,
              },
              {
                name: "湖北",
                value: 810,
              },
              {
                name: "四川",
                value: 453,
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.chinaConfigure();
  },
  methods: {
    chinaConfigure() {
      let myChart = this.$echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  border-radius: 25px;
  background: #581d1d42;
}
.box-card {
  border-radius: 25px;
  background: #d6d5d542;
}
</style>
